<template>
  <SysDialog draggable :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
    @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <el-form :model="dialogModel" ref="addStageForm" :rules="rules" label-width="120px" size="default">
        <el-form-item prop="name" label="阶段名称">
          <el-input v-model="dialogModel.name" clearable></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="阶段排序">
          <el-input v-model="dialogModel.sort" clearable></el-input>
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
  <!-- 上级部门弹框 -->
</template>
<script setup lang='ts'>
import {ref} from 'vue'
import {ElForm} from 'element-plus'
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useBaseModel from '@/composables/01work/01Stage/useBaseModel'
import useInstance from '@/hooks/useInstance';
import { StageList,AddModel } from '@/api/01work/01type'
import {EditType,Title} from '@/type/BaseEnum'
const { dialog, onShow, onClose } = useDialog();
const { rules, dialogModel } = useBaseModel()
const { global } = useInstance()
//表单的ref属性
const addStageForm = ref<InstanceType<typeof ElForm>>();
const emit = defineEmits(['save'])
const confirm = () => {
    addStageForm.value?.validate(valid => {
        //验证通过，才提交表单
        if (valid) {
            emit('save', dialogModel)
            onClose();
        }
    })
 }
//显示弹框
const show = (type: string, row?: AddModel) => {  
  //设置弹框的宽度
  dialog.width = 650;
  dialog.height = 150;
  //设置弹框的标题
  type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
  // dialog.title = '新增阶段名称'
  //显示
  onShow();
  // 清空表单
    global.$resetForm(addStageForm.value, dialogModel);
    // 复制数据
    if(row?.id){
        global.$objCopy(row, dialogModel)
    }
}
defineExpose({
  show
})
// 如何打开弹窗
</script>
<style scoped lang='scss'></style>